<template>
  <div style="height:6vh;padding: 10px 20px;background-color:#fff;">
    <span style="line-height: 60px;font-size:20px;">宠物领养管理</span>
    <el-button type="primary" style="float:right;margin-top: 10px;" @click="openAddDialog">新增宠物领养信息</el-button>
  </div>

  <el-card style="height: 70px;margin: 20px;">
    <el-form :inline="true">
      <el-form-item label="宠物领养搜索" style="width: 220px;">
        <el-input placeholder="输入宠物名称或领养人姓名" v-model="searchAdoptionForm.keyword" @keydown.enter="loadAdoptions"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadAdoptions">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-table :data="adoptions" stripe>
    <el-table-column prop="id" label="领养信息id"></el-table-column>
    <el-table-column prop="petName" label="宠物名称"></el-table-column>
    <el-table-column prop="adopterName" label="领养人姓名"></el-table-column>
    <el-table-column prop="adopterPhone" label="领养人电话"></el-table-column>
    <el-table-column prop="adoptionDate" label="领养日期"></el-table-column>
    <el-table-column prop="status" label="领养状态">
      <template #default="scope">
        <span>{{ scope.row.status === 1 ? '已领养' : '待领养' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="create_time" label="创建时间"></el-table-column>
    <el-table-column prop="update_time" label="更新时间"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="openEditDialog(scope.row)">编辑</el-button>
        <el-button @click="deleteAdoption(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增/编辑对话框 -->
  <el-dialog :title="dialogTitle" style="width: 1000px;padding: 40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="宠物名称">
            <el-input placeholder="请输入宠物名称" v-model="currentAdoption.petName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领养人姓名">
            <el-input placeholder="请输入领养人姓名" v-model="currentAdoption.adopterName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="领养人电话">
            <el-input placeholder="请输入领养人电话" v-model="currentAdoption.adopterPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领养日期">
            <el-date-picker
                v-model="currentAdoption.adoptionDate"
                type="date"
                placeholder="请选择领养日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领养状态">
            <el-radio-group v-model="currentAdoption.status">
              <el-radio label="1">已领养</el-radio>
              <el-radio label="0">待领养</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveAdoption">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";

// 假设这是你的基础 URL
const BASE_URL = 'your_base_url';

// 定义变量用来控制弹窗是否可见
const dialogVisible = ref(false);
// 定义数组用来保存宠物领养数据
const adoptions = ref([]);
// 定义变量用来保存宠物领养搜索条件
const searchAdoptionForm = ref({ keyword: '' });
// 定义变量用来保存当前操作的宠物领养数据
const currentAdoption = ref({
  id: null,
  petName: '',
  adopterName: '',
  adopterPhone: '',
  adoptionDate: '',
  status: '0'
});
// 定义变量用来保存弹窗的标题
const dialogTitle = ref('新增宠物领养信息');

// 点击"新增宠物领养信息"按钮时调用的方法
const openAddDialog = () => {
  dialogTitle.value = '新增宠物领养信息';
  currentAdoption.value = {
    id: null,
    petName: '',
    adopterName: '',
    adopterPhone: '',
    adoptionDate: '',
    status: '0'
  };
  dialogVisible.value = true;
};

// 处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('您确认要关闭弹窗吗?')) {
    currentAdoption.value = {
      id: null,
      petName: '',
      adopterName: '',
      adopterPhone: '',
      adoptionDate: '',
      status: '0'
    };
    dialogVisible.value = false;
  }
};

// 新增或更新宠物领养信息
const saveAdoption = () => {
  let data = qs.stringify(currentAdoption.value);
  console.log(data);
  // axios.post(BASE_URL+'/v1/pet_adoptions/save',data).then((response)=>{
  //   if(response.data.code == 2000){
  //     ElMessage.success('保存成功!');
  //     currentAdoption.value = {};//保存成功后要清空弹窗表单并关闭弹窗
  //     dialogVisible.value = false;
  //     //新增成功后，需要重新加载所有的宠物领养数据
  //     loadAdoptions();
  //   }else{
  //     ElMessage.error(response.data.msg);
  //   }
  // })
};

// 加载宠物领养列表的方法
const loadAdoptions = () => {
  let data = qs.stringify(searchAdoptionForm.value);
  // axios.get(BASE_URL+'/v1/pet_adoptions/select?'+data).then((response)=>{
  //   if(response.data.code == 2000){
  //     adoptions.value = response.data.data;
  //     console.log(adoptions.value);
  //   }else{
  //     ElMessage.error(response.data.msg);
  //   }
  // })
};

// 页面加载完毕立即调用加载宠物领养的方法
onMounted(() => {
  loadAdoptions();
});

// 重置搜索的方法
const resetSearch = () => {
  searchAdoptionForm.value = {}; // 清空搜索条件
  loadAdoptions(); // 重新加载所有宠物领养数据
};

// 打开编辑对话框
const openEditDialog = (row) => {
  dialogTitle.value = '编辑宠物领养信息';
  editedAdoption.value = { ...row };
  dialogVisible.value = true;
};

// 编辑宠物领养信息
const editedAdoption = (id) => {
  dialogVisible.value = true;
  dialogTitle.value = '编辑宠物领养信息';
  // axios.get(BASE_URL+'/v1/pet_adoptions/select?id='+id).then((response)=>{
  //   if(response.data.code==2000){
  //     currentAdoption.value = response.data.data[0];
  //   }else{
  //     ElMessage.error(response.data.msg);
  //   }
  // })
}

// 删除宠物领养信息
const deleteAdoption = (id) => {
  if (confirm('您确认要删除当前宠物领养信息吗?')) {
    // axios.get(BASE_URL+'/v1/pet_adoptions/delete/'+id).then((response)=>{
    //   if(response.data.code==2000){
    //     ElMessage.success('删除宠物品种成功!')
    //    loadAdoptions();
    //   }else{
    //     ElMessage.error(response.data.msg);
    //   }
    // })
  }
};
</script>

<style scoped>

</style>